<template>

  <main class="container">
    <!--------------------------------------
COLOR SCHEME
--------------------------------------->
    <section class="pt-5 pb-5" data-aos="fade-up">
      <h3 class="h5 mb-4 font-weight-bold">Color Scheme</h3>
      <div class="row text-white align-items-center text-center">
        <div class="col-md-4">
          <div class="bg-primary" style="height: 80px">
            <h5 class="pt-4">Primary</h5>
          </div>
        </div>
        <div class="col-md-4">
          <div class="bg-secondary" style="height: 80px">
            <h5 class="pt-4">Secondary</h5>
          </div>
        </div>
        <div class="col-md-4">
          <div class="bg-info" style="height: 80px">
            <h5 class="pt-4">Info</h5>
          </div>
        </div>
        <div class="col-md-4">
          <div class="bg-success" style="height: 80px">
            <h5 class="pt-4">Success</h5>
          </div>
        </div>
        <div class="col-md-4">
          <div class="bg-warning" style="height: 80px">
            <h5 class="pt-4">Warning</h5>
          </div>
        </div>
        <div class="col-md-4">
          <div class="bg-danger" style="height: 80px">
            <h5 class="pt-4">Danger</h5>
          </div>
        </div>
        <div class="col-md-4">
          <div class="bg-purple" style="height: 80px">
            <h5 class="pt-4">Purple</h5>
          </div>
        </div>
        <div class="col-md-4">
          <div class="bg-black" style="height: 80px">
            <h5 class="pt-4">Black</h5>
          </div>
        </div>
        <div class="col-md-4">
          <div class="bg-cyan" style="height: 80px">
            <h5 class="pt-4">Cyan</h5>
          </div>
        </div>
      </div>
    </section>

    <!--------------------------------------
CAROUSEL
--------------------------------------->
    <section class="pt-4 pb-5" data-aos="fade-up" id="example-carousel">
      <h3 class="h5 mb-4 font-weight-bold">Carousel</h3>
      <div
        id="carouselExampleIndicators"
        class="carousel slide carousel-fade"
        data-ride="carousel"
      >
        <ol class="carousel-indicators">
          <li
            data-target="#carouselExampleIndicators"
            data-slide-to="0"
            class="active"
          ></li>
          <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        </ol>
        <div class="carousel-inner shadow-sm rounded">
          <div class="carousel-item active">
            <img
              class="d-block w-100"
              src="https://images.unsplash.com/photo-1475522003475-eb5f96f1f930?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80"
              alt="First slide"
            />
            <div class="carousel-caption d-none d-md-block">
              <h5>
                Mission Beach, San Diego, United States by Matthew Hamilton
              </h5>
            </div>
          </div>
          <div class="carousel-item">
            <img
              class="d-block w-100"
              src="https://images.unsplash.com/photo-1521464302861-ce943915d1c3?ixlib=rb-1.2.1&auto=format&fit=crop&w=1351&q=80"
              alt="Second slide"
            />
            <div class="carousel-caption d-none d-md-block">
              <h5>
                Golden Gate Bridge, San Francisco, United States by Tim Foster
              </h5>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!--------------------------------------
BUTTONS
--------------------------------------->
    <section class="pt-4 pb-5" data-aos="fade-up">
      <h3 class="h5 mb-4 font-weight-bold">Buttons</h3>
      <div class="row mb-3">
        <div class="col">
          <button type="button" class="btn btn-block btn-primary mb-1">
            Primary
          </button>
        </div>
        <div class="col">
          <button type="button" class="btn btn-block btn-info">Info</button>
        </div>
        <div class="col">
          <button type="button" class="btn btn-block btn-secondary">
            Secondary
          </button>
        </div>
        <div class="col">
          <button type="button" class="btn btn-block btn-success">
            Success
          </button>
        </div>
      </div>
      <div class="row mb-3">
        <div class="col">
          <button type="button" class="btn btn-block btn-warning mb-1">
            Warning
          </button>
        </div>
        <div class="col">
          <button type="button" class="btn btn-block btn-danger">Danger</button>
        </div>
        <div class="col">
          <button type="button" class="btn btn-block btn-purple">Purple</button>
        </div>
        <div class="col">
          <button type="button" class="btn btn-block btn-cyan">Cyan</button>
        </div>
      </div>
      <div class="row mb-3">
        <div class="col">
          <button type="button" class="btn btn-block btn-outline-primary mb-1">
            Primary
          </button>
        </div>
        <div class="col">
          <button type="button" class="btn btn-block btn-outline-info">
            Info
          </button>
        </div>
        <div class="col">
          <button type="button" class="btn btn-block btn-outline-secondary">
            Secondary
          </button>
        </div>
        <div class="col">
          <button type="button" class="btn btn-block btn-outline-success">
            Success
          </button>
        </div>
      </div>
      <div class="row mb-3">
        <div class="col">
          <button type="button" class="btn btn-block btn-outline-warning mb-1">
            Warning
          </button>
        </div>
        <div class="col">
          <button type="button" class="btn btn-block btn-outline-danger">
            Danger
          </button>
        </div>
        <div class="col">
          <button type="button" class="btn btn-block btn-outline-purple">
            Purple
          </button>
        </div>
        <div class="col">
          <button type="button" class="btn btn-block btn-outline-cyan">
            Cyan
          </button>
        </div>
      </div>
      <h5 class="mt-5 mb-3">Round</h5>
      <div class="row mb-3">
        <div class="col">
          <button
            type="button"
            class="btn btn-block btn-primary btn-round mb-1"
          >
            Primary
          </button>
        </div>
        <div class="col">
          <button type="button" class="btn btn-block btn-info btn-round">
            Info
          </button>
        </div>
        <div class="col">
          <button type="button" class="btn btn-block btn-secondary btn-round">
            Secondary
          </button>
        </div>
        <div class="col">
          <button type="button" class="btn btn-block btn-success btn-round">
            Success
          </button>
        </div>
      </div>
      <div class="row mb-3 mb-3">
        <div class="col">
          <button
            type="button"
            class="btn btn-block btn-warning btn-round mb-1"
          >
            Warning
          </button>
        </div>
        <div class="col">
          <button type="button" class="btn btn-block btn-danger btn-round">
            Danger
          </button>
        </div>
        <div class="col">
          <button type="button" class="btn btn-block btn-purple btn-round">
            Purple
          </button>
        </div>
        <div class="col">
          <button type="button" class="btn btn-block btn-cyan btn-round">
            Cyan
          </button>
        </div>
      </div>
      <div class="row mb-3">
        <div class="col">
          <button
            type="button"
            class="btn btn-block btn-outline-primary btn-round mb-1"
          >
            Primary
          </button>
        </div>
        <div class="col">
          <button
            type="button"
            class="btn btn-block btn-outline-info btn-round"
          >
            Info
          </button>
        </div>
        <div class="col">
          <button
            type="button"
            class="btn btn-block btn-outline-secondary btn-round"
          >
            Secondary
          </button>
        </div>
        <div class="col">
          <button
            type="button"
            class="btn btn-block btn-outline-success btn-round"
          >
            Success
          </button>
        </div>
      </div>
      <div class="row">
        <div class="col">
          <button
            type="button"
            class="btn btn-block btn-outline-warning btn-round mb-1"
          >
            Warning
          </button>
        </div>
        <div class="col">
          <button
            type="button"
            class="btn btn-block btn-outline-danger btn-round"
          >
            Danger
          </button>
        </div>
        <div class="col">
          <button
            type="button"
            class="btn btn-block btn-outline-purple btn-round"
          >
            Purple
          </button>
        </div>
        <div class="col">
          <button
            type="button"
            class="btn btn-block btn-outline-cyan btn-round"
          >
            Cyan
          </button>
        </div>
      </div>
      <h5 class="mt-5">Sizes</h5>
      <button type="button" class="btn btn-sm btn-info btn-round mb-1">
        Small
      </button>
      <button type="button" class="btn btn-info btn-round mb-1">Default</button>
      <button type="button" class="btn btn-lg btn-info btn-round mb-1">
        Large
      </button>
    </section>

    <!--------------------------------------
BADGES
--------------------------------------->
    <section class="pt-4 pb-5" data-aos="fade-up">
      <h3 class="h5 mb-4 font-weight-bold">Badges</h3>
      <div class="row">
        <div class="col-md-6">
          <span class="badge badge-pill badge-primary">Primary</span>
          <span class="badge badge-pill badge-secondary">Secondary</span>
          <span class="badge badge-pill badge-success">Success</span>
          <span class="badge badge-pill badge-danger">Danger</span>
          <span class="badge badge-pill badge-warning">Warning</span>
          <span class="badge badge-pill badge-info">Info</span>
          <div class="mt-4">
            <button type="button" class="btn btn-secondary mr-2 mb-2">
              Notifications <span class="badge badge-info ml-2">4</span>
            </button>
            <a class="btn btn-primary mr-2 mb-2" href="#">
              New Items <span class="badge badge-warning ml-2">2</span>
            </a>
            <a class="btn btn-success mr-2 mb-2" href="#">
              Discount <span class="badge badge-danger ml-2">50%</span>
            </a>
            <a class="btn btn-info mb-2" href="#">
              Profile <span class="badge badge-dark ml-2">15%</span>
            </a>
          </div>
        </div>
      </div>
    </section>

    <!--------------------------------------
ALERTS
--------------------------------------->
    <section class="pt-4 pb-5" data-aos="fade-up">
      <h3 class="h5 mb-4 font-weight-bold">Alerts</h3>
      <div class="row">
        <div class="col-md-6">
          <div class="alert alert-primary" role="alert">
            A simple primary alert-check it out!
          </div>
          <div class="alert alert-secondary" role="alert">
            A simple secondary alert-check it out!
          </div>
          <div class="alert alert-success" role="alert">
            A simple success alert-check it out!
          </div>
        </div>
        <div class="col-md-6">
          <div class="alert alert-danger" role="alert">
            <i class="fas fa-bullhorn"></i> A simple danger alert-check it out!
            <button
              type="button"
              class="close"
              data-dismiss="alert"
              aria-label="Close"
            >
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="alert alert-warning" role="alert">
            A simple warning alert-check it out!
            <button
              type="button"
              class="close"
              data-dismiss="alert"
              aria-label="Close"
            >
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="alert alert-info" role="alert">
            A simple info alert-check it out!
            <button
              type="button"
              class="close"
              data-dismiss="alert"
              aria-label="Close"
            >
              <span aria-hidden="true">×</span>
            </button>
          </div>
        </div>
      </div>
    </section>

    <!--------------------------------------
ICONS
--------------------------------------->
    <section class="pt-4 pb-5" data-aos="fade-up">
      <h3 class="h5 mb-4 font-weight-bold">Icons</h3>
      <p class="mb-5">
        Anchor UI Kit comes with latest Font Awesome (5.3.1), the web’s most
        popular icon set and toolkit.
      </p>
      <span class="inline-block mr-3">
        <i class="fa fa-heart text-danger"></i
        ><i class="fa fa-heart text-danger fa-2x"></i
        ><i class="fa fa-heart text-danger fa-3x"></i>
      </span>
      <span class="mr-3">
        <span class="iconbox iconmedium rounded-circle text-primary"
          ><i class="fab fa-facebook-f"></i
        ></span>
        <span class="iconbox iconmedium rounded-circle text-info"
          ><i class="fab fa-twitter"></i
        ></span>
        <span class="iconbox iconmedium rounded-circle text-danger"
          ><i class="fab fa-google"></i
        ></span>
      </span>
      <span class="mr-3">
        <span
          class="iconbox iconsmall fill rounded-circle bg-primary text-white shadow border-0"
          ><i class="fas fa-cart-arrow-down"></i
        ></span>
        <span
          class="iconbox iconmedium fill rounded-circle bg-warning text-white shadow border-0"
          ><i class="fas fa-coffee"></i
        ></span>
        <span
          class="iconbox iconlarge fill rounded-circle bg-success text-white shadow border-0"
          ><i class="fa fa-book-reader"></i
        ></span>
      </span>
    </section>

    <!--------------------------------------
NAVBARS
--------------------------------------->
    <section class="pt-4 pb-5" data-aos="fade-up">
      <h3 class="h5 mb-4 font-weight-bold">Navbars</h3>
      <nav class="navbar navbar-expand-lg navbar-dark bg-primary mb-4">
        <div class="container">
          <a class="navbar-brand" href="#"
            ><i class="fas fa-anchor mr-2"></i><strong>Anchor UI</strong> Kit</a
          ><button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarNavDropdown-1"
            aria-controls="navbarNavDropdown-1"
            aria-expanded="false"
            aria-label="Toggle navigation"
            style=""
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavDropdown-1">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#"
                  >Home <span class="sr-only">(current)</span></a
                >
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
              <li class="nav-item dropdown">
                <a
                  class="nav-link dropdown-toggle"
                  href="https://wowthemes.net"
                  id="navbarDropdownMenuLink"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                  >Services</a
                >
                <div
                  class="dropdown-menu"
                  aria-labelledby="navbarDropdownMenuLink"
                >
                  <a class="dropdown-item" href="#">Design</a
                  ><a class="dropdown-item" href="#">Development</a
                  ><a class="dropdown-item" href="#">Marketing</a>
                </div>
              </li>
            </ul>
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-twitter"></i></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-facebook"></i></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-linkedin"></i></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-github"></i></a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <nav class="navbar navbar-expand-lg navbar-dark bg-success mb-4">
        <div class="container">
          <a class="navbar-brand" href="#"
            ><i class="fas fa-anchor mr-2"></i><strong>Anchor UI</strong> Kit</a
          >
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarNavDropdown-2"
            aria-controls="navbarNavDropdown-2"
            aria-expanded="false"
            aria-label="Toggle navigation"
            style=""
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div
            class="collapse navbar-collapse mr-auto"
            id="navbarNavDropdown-2"
          >
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#"
                  >Home <span class="sr-only">(current)</span></a
                >
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
              <li class="nav-item dropdown">
                <a
                  class="nav-link dropdown-toggle"
                  href="https://designrevision.com"
                  id="navbarDropdownMenuLink-2"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                  >Services</a
                >
                <div
                  class="dropdown-menu"
                  aria-labelledby="navbarDropdownMenuLink-2"
                >
                  <a class="dropdown-item" href="#">Design</a
                  ><a class="dropdown-item" href="#">Development</a
                  ><a class="dropdown-item" href="#">Marketing</a>
                </div>
              </li>
            </ul>
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-twitter"></i></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-facebook"></i></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-linkedin"></i></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-github"></i></a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <nav class="navbar navbar-expand-lg navbar-dark bg-warning mb-4">
        <div class="container">
          <a class="navbar-brand" href="#"
            ><i class="fas fa-anchor mr-2"></i><strong>Anchor UI</strong> Kit</a
          ><button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarNavDropdown-4"
            aria-controls="navbarNavDropdown-4"
            aria-expanded="false"
            aria-label="Toggle navigation"
            style=""
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavDropdown-4">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#"
                  >Home <span class="sr-only">(current)</span></a
                >
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
              <li class="nav-item dropdown">
                <a
                  class="nav-link dropdown-toggle"
                  href="https://designrevision.com"
                  id="navbarDropdownMenuLink-4"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                  >Services</a
                >
                <div
                  class="dropdown-menu"
                  aria-labelledby="navbarDropdownMenuLink-4"
                >
                  <a class="dropdown-item" href="#">Design</a
                  ><a class="dropdown-item" href="#">Development</a
                  ><a class="dropdown-item" href="#">Marketing</a>
                </div>
              </li>
            </ul>
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-twitter"></i></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-facebook"></i></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-linkedin"></i></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-github"></i></a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <nav class="navbar navbar-expand-lg navbar-dark bg-danger mb-4">
        <div class="container">
          <a class="navbar-brand" href="#"
            ><i class="fas fa-anchor mr-2"></i><strong>Anchor UI</strong> Kit</a
          >
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarNavDropdown-5"
            aria-controls="navbarNavDropdown-5"
            aria-expanded="false"
            aria-label="Toggle navigation"
            style=""
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div
            class="collapse navbar-collapse mr-auto"
            id="navbarNavDropdown-5"
          >
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#"
                  >Home <span class="sr-only">(current)</span></a
                >
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
              <li class="nav-item dropdown">
                <a
                  class="nav-link dropdown-toggle"
                  href="https://designrevision.com"
                  id="navbarDropdownMenuLink-5"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                  >Services</a
                >
                <div
                  class="dropdown-menu"
                  aria-labelledby="navbarDropdownMenuLink-5"
                >
                  <a class="dropdown-item" href="#">Design</a
                  ><a class="dropdown-item" href="#">Development</a
                  ><a class="dropdown-item" href="#">Marketing</a>
                </div>
              </li>
            </ul>
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-twitter"></i></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-facebook"></i></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-linkedin"></i></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-github"></i></a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
        <div class="container">
          <a class="navbar-brand" href="#"
            ><i class="fas fa-anchor mr-2"></i><strong>Anchor UI</strong> Kit</a
          >
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarNavDropdown-6"
            aria-controls="navbarNavDropdown-6"
            aria-expanded="false"
            aria-label="Toggle navigation"
            style=""
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div
            class="collapse navbar-collapse mr-auto"
            id="navbarNavDropdown-6"
          >
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#"
                  >Home <span class="sr-only">(current)</span></a
                >
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
              <li class="nav-item dropdown">
                <a
                  class="nav-link dropdown-toggle"
                  href="https://designrevision.com"
                  id="navbarDropdownMenuLink-6"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                  >Services</a
                >
                <div
                  class="dropdown-menu"
                  aria-labelledby="navbarDropdownMenuLink-6"
                >
                  <a class="dropdown-item" href="#">Design</a
                  ><a class="dropdown-item" href="#">Development</a
                  ><a class="dropdown-item" href="#">Marketing</a>
                </div>
              </li>
            </ul>
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-twitter"></i></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-facebook"></i></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-linkedin"></i></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-github"></i></a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
      <nav class="navbar navbar-expand-lg navbar-light bg-white">
        <div class="container">
          <a class="navbar-brand" href="#"
            ><i class="fas fa-anchor mr-2"></i><strong>Anchor UI</strong> Kit</a
          >
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarNavDropdown-7"
            aria-controls="navbarNavDropdown-7"
            aria-expanded="false"
            aria-label="Toggle navigation"
            style=""
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarNavDropdown-7">
            <ul class="navbar-nav mr-auto">
              <li class="nav-item active">
                <a class="nav-link" href="#"
                  >Home <span class="sr-only">(current)</span></a
                >
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#">Features</a>
              </li>
              <li class="nav-item"><a class="nav-link" href="#">Pricing</a></li>
              <li class="nav-item dropdown">
                <a
                  class="nav-link dropdown-toggle"
                  href="https://designrevision.com"
                  id="navbarDropdownMenuLink-7"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                  >Services</a
                >
                <div
                  class="dropdown-menu"
                  aria-labelledby="navbarDropdownMenuLink-7"
                >
                  <a class="dropdown-item" href="#">Design</a
                  ><a class="dropdown-item" href="#">Development</a
                  ><a class="dropdown-item" href="#">Marketing</a>
                </div>
              </li>
            </ul>
            <ul class="navbar-nav">
              <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-twitter"></i></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-facebook"></i></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-linkedin"></i></a>
              </li>
              <li class="nav-item">
                <a class="nav-link" href="#"><i class="fab fa-github"></i></a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </section>

    <!--------------------------------------
HEADERS
--------------------------------------->
    <section class="pt-4 pb-5" data-aos="fade-up">
      <h3 class="h5 mb-4 font-weight-bold">Headers</h3>
      <div class="full-width">
        <header>
          <div
            class="jumbotron jumbotron-lg jumbotron-fluid mb-0 pb-5 bg-primary position-relative"
          >
            <div class="container-fluid text-white h-100">
              <div
                class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5"
              >
                <div class="col pt-4 pb-4">
                  <h1 class="display-3">
                    Build something <strong>nice</strong> &amp; easy
                  </h1>
                  <h5 class="font-weight-light mb-4">
                    With this FREE Bootstrap 4.1.3<strong> UI Kit</strong> &amp;
                    <strong><i class="fab fa-sass fa-2x text-info"></i></strong>
                  </h5>
                  <a href="#" class="btn btn-lg btn-outline-white btn-round"
                    >Learn more</a
                  >
                </div>
                <div class="col align-self-bottom align-items-right text-right">
                  <img
                    src="../../assets/img/demo/dashb2.png"
                    class="rounded img-fluid"
                  />
                </div>
              </div>
            </div>
          </div>
          <svg
            style="
              -webkit-transform: rotate(-180deg);
              -moz-transform: rotate(-180deg);
              -o-transform: rotate(-180deg);
              transform: rotate(-180deg);
              margin-top: -1px;
            "
            version="1.1"
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            x="0px"
            y="0px"
            viewBox="0 0 1440 126"
            xml:space="preserve"
          >
            <path
              class="bg-primary"
              d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z"
            ></path>
          </svg>
        </header>
        <hr class="border-0 mt-5 mb-5" />
        <header>
          <div
            class="jumbotron jumbotron-lg jumbotron-fluid mb-0 pb-5 bg-secondary position-relative"
          >
            <div class="container-fluid text-white h-100">
              <div
                class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5"
              >
                <div class="col pt-4 pb-4">
                  <h1 class="display-3">
                    Build something <strong>nice</strong> &amp; easy
                  </h1>
                  <h5 class="font-weight-light mb-4">
                    With this FREE Bootstrap 4.1.3<strong> UI Kit</strong> &amp;
                    <strong><i class="fab fa-sass fa-2x text-info"></i></strong>
                  </h5>
                  <a href="#" class="btn btn-lg btn-outline-white btn-round"
                    >Learn more</a
                  >
                </div>
                <div class="col align-self-bottom align-items-right text-right">
                  <img
                    src="../../assets/img/demo/dashb2.png"
                    class="rounded img-fluid"
                  />
                </div>
              </div>
            </div>
          </div>
          <svg
            style="
              -webkit-transform: rotate(-180deg);
              -moz-transform: rotate(-180deg);
              -o-transform: rotate(-180deg);
              transform: rotate(-180deg);
              margin-top: -1px;
            "
            version="1.1"
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            x="0px"
            y="0px"
            viewBox="0 0 1440 126"
            xml:space="preserve"
          >
            <path
              class="bg-secondary"
              d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z"
            ></path>
          </svg>
        </header>
        <hr class="border-0 mt-5 mb-5" />
        <header>
          <div
            class="jumbotron jumbotron-lg jumbotron-fluid mb-0 pb-5 bg-info position-relative"
          >
            <div class="container-fluid h-100">
              <div
                class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5 text-primary"
              >
                <div class="col pt-4 pb-4">
                  <h1 class="display-3">
                    Build something <strong>nice</strong> &amp; easy
                  </h1>
                  <h5 class="font-weight-light mb-4">
                    With this FREE Bootstrap 4.1.3<strong> UI Kit</strong> &amp;
                    <strong
                      ><i class="fab fa-sass fa-2x text-primary"></i
                    ></strong>
                  </h5>
                  <a
                    href="#"
                    class="btn btn-lg btn-outline-primary btn-round mt-1"
                    >Learn more</a
                  >
                </div>
                <div class="col align-self-bottom align-items-right text-right">
                  <img
                    src="../../assets/img/demo/dashb2.png"
                    class="rounded img-fluid"
                  />
                </div>
              </div>
            </div>
          </div>
          <svg
            style="
              -webkit-transform: rotate(-180deg);
              -moz-transform: rotate(-180deg);
              -o-transform: rotate(-180deg);
              transform: rotate(-180deg);
              margin-top: -1px;
            "
            version="1.1"
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            x="0px"
            y="0px"
            viewBox="0 0 1440 126"
            xml:space="preserve"
          >
            <path
              class="bg-info"
              d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z"
            ></path>
          </svg>
        </header>
        <hr class="border-0 mt-5 mb-5" />
        <header>
          <div
            class="jumbotron jumbotron-lg jumbotron-fluid mb-0 pb-5 bg-warning position-relative"
          >
            <div class="container-fluid text-dark h-100">
              <div
                class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5"
              >
                <div class="col pt-4 pb-4">
                  <h1 class="display-3">
                    Build something <strong>nice</strong> &amp; easy
                  </h1>
                  <h5 class="font-weight-light mb-4">
                    With this FREE Bootstrap 4.1.3<strong> UI Kit</strong> &amp;
                    <strong><i class="fab fa-sass fa-2x text-dark"></i></strong>
                  </h5>
                  <a href="#" class="btn btn-lg btn-outline-dark btn-round mt-1"
                    >Learn more</a
                  >
                </div>
                <div class="col align-self-bottom align-items-right text-right">
                  <img
                    src="../../assets/img/demo/dashb2.png"
                    class="rounded img-fluid"
                  />
                </div>
              </div>
            </div>
          </div>
          <svg
            style="
              -webkit-transform: rotate(-180deg);
              -moz-transform: rotate(-180deg);
              -o-transform: rotate(-180deg);
              transform: rotate(-180deg);
              margin-top: -1px;
            "
            version="1.1"
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            x="0px"
            y="0px"
            viewBox="0 0 1440 126"
            xml:space="preserve"
          >
            <path
              class="bg-warning"
              d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z"
            ></path>
          </svg>
        </header>
        <hr class="border-0 mt-5 mb-5" />
        <header>
          <div
            class="jumbotron jumbotron-lg jumbotron-fluid mb-0 pb-5 bg-danger position-relative"
          >
            <div class="container-fluid text-white h-100">
              <div
                class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5"
              >
                <div class="col pt-4 pb-4">
                  <h1 class="display-3">
                    Build something <strong>nice</strong> &amp; easy
                  </h1>
                  <h5 class="font-weight-light mb-4">
                    With this FREE Bootstrap 4.1.3<strong> UI Kit</strong> &amp;
                    <strong
                      ><i class="fab fa-sass fa-2x text-white"></i
                    ></strong>
                  </h5>
                  <a
                    href="#"
                    class="btn btn-lg btn-outline-white btn-round mt-1"
                    >Learn more</a
                  >
                </div>
                <div class="col align-self-bottom align-items-right text-right">
                  <img
                    src="../../assets/img/demo/dashb2.png"
                    class="rounded img-fluid"
                  />
                </div>
              </div>
            </div>
          </div>
          <svg
            style="
              -webkit-transform: rotate(-180deg);
              -moz-transform: rotate(-180deg);
              -o-transform: rotate(-180deg);
              transform: rotate(-180deg);
              margin-top: -1px;
            "
            version="1.1"
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            x="0px"
            y="0px"
            viewBox="0 0 1440 126"
            xml:space="preserve"
          >
            <path
              class="bg-danger"
              d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z"
            ></path>
          </svg>
        </header>
        <hr class="border-0 mt-5 mb-5" />
        <header>
          <div
            class="jumbotron jumbotron-lg jumbotron-fluid mb-0 pb-5 bg-cyan position-relative"
          >
            <div class="container-fluid text-white h-100">
              <div
                class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5"
              >
                <div class="col pt-4 pb-4">
                  <h1 class="display-3">
                    Build something <strong>nice</strong> &amp; easy
                  </h1>
                  <h5 class="font-weight-light mb-4">
                    With this FREE Bootstrap 4.1.3<strong> UI Kit</strong> &amp;
                    <strong><i class="fab fa-sass fa-2x"></i></strong>
                  </h5>
                  <a
                    href="#"
                    class="btn btn-lg btn-outline-white btn-round mt-1"
                    >Learn more</a
                  >
                </div>
                <div class="col align-self-bottom align-items-right text-right">
                  <img
                    src="../../assets/img/demo/dashb2.png"
                    class="rounded img-fluid"
                  />
                </div>
              </div>
            </div>
          </div>
          <svg
            style="
              -webkit-transform: rotate(-180deg);
              -moz-transform: rotate(-180deg);
              -o-transform: rotate(-180deg);
              transform: rotate(-180deg);
              margin-top: -1px;
            "
            version="1.1"
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            x="0px"
            y="0px"
            viewBox="0 0 1440 126"
            xml:space="preserve"
          >
            <path
              class="bg-cyan"
              d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z"
            ></path>
          </svg>
        </header>
        <hr class="border-0 mt-5 mb-5" />
        <header>
          <div
            class="jumbotron jumbotron-lg jumbotron-fluid mb-0 pb-5 bg-purple position-relative"
          >
            <div class="container-fluid text-white h-100">
              <div
                class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5"
              >
                <div class="col pt-4 pb-4">
                  <h1 class="display-3">
                    Build something <strong>nice</strong> &amp; easy
                  </h1>
                  <h5 class="font-weight-light mb-4">
                    With this FREE Bootstrap 4.1.3<strong> UI Kit</strong> &amp;
                    <strong><i class="fab fa-sass fa-2x text-info"></i></strong>
                  </h5>
                  <a
                    href="#"
                    class="btn btn-lg btn-outline-white btn-round mt-1"
                    >Learn more</a
                  >
                </div>
                <div class="col align-self-bottom align-items-right text-right">
                  <img
                    src="../../assets/img/demo/dashb2.png"
                    class="rounded img-fluid"
                  />
                </div>
              </div>
            </div>
          </div>
          <svg
            style="
              -webkit-transform: rotate(-180deg);
              -moz-transform: rotate(-180deg);
              -o-transform: rotate(-180deg);
              transform: rotate(-180deg);
              margin-top: -1px;
            "
            version="1.1"
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            x="0px"
            y="0px"
            viewBox="0 0 1440 126"
            xml:space="preserve"
          >
            <path
              class="bg-purple"
              d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z"
            ></path>
          </svg>
        </header>
        <hr class="border-0 mt-5 mb-5" />
        <header>
          <div
            class="jumbotron jumbotron-lg jumbotron-fluid mb-0 pb-5 bg-success position-relative"
          >
            <div class="container-fluid text-white h-100">
              <div
                class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5"
              >
                <div class="col pt-4 pb-4">
                  <h1 class="display-3">
                    Build something <strong>nice</strong> &amp; easy
                  </h1>
                  <h5 class="font-weight-light mb-4">
                    With this FREE Bootstrap 4.1.3<strong> UI Kit</strong> &amp;
                    <strong><i class="fab fa-sass fa-2x text-info"></i></strong>
                  </h5>
                  <a
                    href="#"
                    class="btn btn-lg btn-outline-white btn-round mt-1"
                    >Learn more</a
                  >
                </div>
                <div class="col align-self-bottom align-items-right text-right">
                  <img
                    src="../../assets/img/demo/dashb2.png"
                    class="rounded img-fluid"
                  />
                </div>
              </div>
            </div>
          </div>
          <svg
            style="
              -webkit-transform: rotate(-180deg);
              -moz-transform: rotate(-180deg);
              -o-transform: rotate(-180deg);
              transform: rotate(-180deg);
              margin-top: -1px;
            "
            version="1.1"
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            x="0px"
            y="0px"
            viewBox="0 0 1440 126"
            xml:space="preserve"
          >
            <path
              class="bg-success"
              d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z"
            ></path>
          </svg>
        </header>
        <hr class="border-0 mt-5 mb-5" />
        <header>
          <div
            class="jumbotron jumbotron-lg jumbotron-fluid mb-0 pb-5 bg-dark position-relative"
          >
            <div class="container-fluid text-white h-100">
              <div
                class="d-lg-flex align-items-center justify-content-between text-center pl-lg-5"
              >
                <div class="col pt-4 pb-4">
                  <h1 class="display-3">
                    Build something <strong>nice</strong> &amp; easy
                  </h1>
                  <h5 class="font-weight-light mb-4">
                    With this FREE Bootstrap 4.1.3<strong> UI Kit</strong> &amp;
                    <strong><i class="fab fa-sass fa-2x text-info"></i></strong>
                  </h5>
                  <a
                    href="#"
                    class="btn btn-lg btn-outline-white btn-round mt-1"
                    >Learn more</a
                  >
                </div>
                <div class="col align-self-bottom align-items-right text-right">
                  <img
                    src="../../assets/img/demo/dashb2.png"
                    class="rounded img-fluid"
                  />
                </div>
              </div>
            </div>
          </div>
          <svg
            style="
              -webkit-transform: rotate(-180deg);
              -moz-transform: rotate(-180deg);
              -o-transform: rotate(-180deg);
              transform: rotate(-180deg);
              margin-top: -1px;
            "
            version="1.1"
            id="Layer_1"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            x="0px"
            y="0px"
            viewBox="0 0 1440 126"
            xml:space="preserve"
          >
            <path
              class="bg-dark"
              d="M685.6,38.8C418.7-11.1,170.2,9.9,0,30v96h1440V30C1252.7,52.2,1010,99.4,685.6,38.8z"
            ></path>
          </svg>
        </header>
      </div>
    </section>

    <!--------------------------------------
CALL TO ACTIONS
--------------------------------------->
    <section class="pt-4 pb-5" data-aos="fade-up">
      <h3 class="h5 mb-4 font-weight-bold">Call to action</h3>
      <div class="jumbotron p-5 jumbotron-fluid bg-primary">
        <div class="container h-100">
          <div
            class="row justify-content-between align-items-center text-md-center text-lg-left"
          >
            <div class="col-lg-9">
              <h5 class="font-weight-light text-white">
                Free Bootstrap 4.1.3<strong> UI Kit</strong> with
                <strong><i class="fab fa-sass fa-2x"></i></strong> for rapid
                development
              </h5>
            </div>
            <div class="col-lg-3 text-md-center text-lg-right mt-4 mb-4">
              <a href="#" class="btn btn-lg btn-info">Call to action</a>
            </div>
          </div>
        </div>
      </div>
      <div class="jumbotron p-5 jumbotron-fluid bg-info">
        <div class="container text-center h-100">
          <h5 class="font-weight-light mb-4">
            Free Bootstrap 4.1.3<strong> UI Kit</strong> with
            <strong><i class="fab fa-sass fa-2x"></i></strong> for rapid
            development
          </h5>
          <a href="#" class="btn btn-lg btn-primary">Call to action</a>
        </div>
      </div>
      <div class="jumbotron p-5 jumbotron-fluid bg-warning">
        <div class="container h-100">
          <div
            class="row justify-content-between align-items-center text-md-center text-lg-left"
          >
            <div class="col-lg-9">
              <h5 class="font-weight-light text-dark">
                Free Bootstrap 4.1.3<strong> UI Kit</strong> with
                <strong><i class="fab fa-sass fa-2x"></i></strong> for rapid
                development
              </h5>
            </div>
            <div class="col-lg-3 text-md-center text-lg-right mt-4 mb-4">
              <a href="#" class="btn btn-lg btn-outline-dark">Call to action</a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!--------------------------------------
JUMBOTRON
--------------------------------------->
    <section class="pt-4 pb-5" data-aos="fade-up">
      <h3 class="h5 mb-4 font-weight-bold">Jumbotron BG Image Overlay</h3>
      <div
        class="jumbotron jumbotron-xl jumbotron-fluid overlay overlay-blue"
        style="
          background-size: cover;
          background-image: url(../../assets/img/demo/1.jpg);
        "
      >
        <div class="container text-center text-white h-100">
          <h1 class="display-2">Anchor <strong>UI Kit</strong></h1>
          <h5 class="font-weight-light">
            Free Bootstrap 4.1.3<strong> UI Kit</strong> with
            <strong><i class="fab fa-sass fa-2x"></i></strong> for rapid
            development
          </h5>
        </div>
        <p class="bottom-align-text-absolute">
          <span class="d-block text-center text-white"
            >Made with <i class="fas fa-heart text-danger"></i> by WOW
            Themes</span
          >
        </p>
      </div>
      <div
        class="jumbotron jumbotron-xl jumbotron-fluid overlay overlay-red"
        style="
          background-size: cover;
          background-image: url(../../assets/img/demo/2.jpg);
        "
      >
        <div class="container text-center text-white h-100">
          <h1 class="display-2">Anchor <strong>UI Kit</strong></h1>
          <h5 class="font-weight-light">
            Free Bootstrap 4.1.3<strong> UI Kit</strong> with
            <strong><i class="fab fa-sass fa-2x"></i></strong> for rapid
            development
          </h5>
        </div>
        <p class="bottom-align-text-absolute">
          <span class="d-block text-center text-white"
            >Made with <i class="fas fa-heart text-danger"></i> by WOW
            Themes</span
          >
        </p>
      </div>
      <div
        class="jumbotron jumbotron-xl jumbotron-fluid overlay overlay-black mb-0"
        style="
          background-size: cover;
          background-image: url(../../assets/img/demo/4.jpg);
        "
      >
        <div class="container text-center text-white h-100">
          <h1 class="display-2">Anchor <strong>UI Kit</strong></h1>
          <h5 class="font-weight-light">
            Free Bootstrap 4.1.3<strong> UI Kit</strong> with
            <strong><i class="fab fa-sass fa-2x"></i></strong> for rapid
            development
          </h5>
        </div>
        <p class="bottom-align-text-absolute">
          <span class="d-block text-center text-white"
            >Made with <i class="fas fa-heart text-danger"></i> by WOW
            Themes</span
          >
        </p>
      </div>
    </section>

    <!--------------------------------------
IMAGE AVATARS
--------------------------------------->
    <section class="pt-4 pb-5" data-aos="fade-up">
      <h3 class="h5 mb-4 font-weight-bold">Avatars</h3>
      <span class="mr-3">
        <img
          class="rounded-circle shadow"
          src="../../assets/img/demo/avatar.png"
          width="50"
        />
        <img
          class="rounded-circle shadow"
          src="../../assets/img/demo/avatar.png"
          width="70"
        />
        <img
          class="rounded-circle shadow"
          src="../../assets/img/demo/avatar.png"
          width="90"
        />
      </span>
      <span class="mr-3">
        <img
          class="rounded-circle shadow"
          src="../../assets/img/demo/avatar2.jpg"
          width="50"
        />
        <img
          class="rounded-circle shadow"
          src="../../assets/img/demo/avatar2.jpg"
          width="70"
        />
        <img
          class="rounded-circle shadow"
          src="../../assets/img/demo/avatar2.jpg"
          width="90"
        />
      </span>
    </section>

    <!--------------------------------------
TOOLTIPS & POPOVERS
--------------------------------------->
    <section class="pt-4 pb-5" data-aos="fade-up">
      <h3 class="h5 mb-4 font-weight-bold">Popovers & Tooltips</h3>
      <div class="row">
        <div class="col-md-6">
          <h4 class="h6 mb-4">Popovers (click me)</h4>
          <a
            tabindex="0"
            data-placement="top"
            class="btn btn-light"
            role="button"
            data-toggle="popover"
            data-trigger="focus"
            title=""
            data-content="And here's some amazing content. It's very engaging. Right?"
            data-original-title="Dismissible popover"
            >On Top</a
          >
          <a
            tabindex="0"
            data-placement="right"
            class="btn btn-light"
            role="button"
            data-toggle="popover"
            data-trigger="focus"
            title=""
            data-content="And here's some amazing content. It's very engaging. Right?"
            data-original-title="Dismissible popover"
            >On Right</a
          >
          <a
            tabindex="0"
            data-placement="bottom"
            class="btn btn-light"
            role="button"
            data-toggle="popover"
            data-trigger="focus"
            title=""
            data-content="And here's some amazing content. It's very engaging. Right?"
            data-original-title="Dismissible popover"
            >On Bottom</a
          >
          <a
            tabindex="0"
            data-placement="left"
            class="btn btn-light"
            role="button"
            data-toggle="popover"
            data-trigger="focus"
            title=""
            data-content="And here's some amazing content. It's very engaging. Right?"
            data-original-title="Dismissible popover"
            >On Left</a
          >
        </div>
        <div class="col-md-6">
          <h4 class="h6 mb-4">Tooltips (hover me)</h4>
          <button
            type="button"
            class="btn btn-light"
            data-toggle="tooltip"
            data-placement="top"
            title=""
            data-original-title="Tooltip on top"
          >
            On top
          </button>
          <button
            type="button"
            class="btn btn-light"
            data-toggle="tooltip"
            data-placement="right"
            title=""
            data-original-title="Tooltip on right"
          >
            On right
          </button>
          <button
            type="button"
            class="btn btn-light"
            data-toggle="tooltip"
            data-placement="bottom"
            title=""
            data-original-title="Tooltip on bottom"
          >
            On bottom
          </button>
          <button
            type="button"
            class="btn btn-light"
            data-toggle="tooltip"
            data-placement="left"
            title=""
            data-original-title="Tooltip on left"
          >
            On left
          </button>
        </div>
      </div>
    </section>

    <!--------------------------------------
TABLE
--------------------------------------->
    <section class="pt-4 pb-5" data-aos="fade-up">
      <h3 class="h5 mb-4 font-weight-bold">Table</h3>
      <table class="table">
        <thead class="thead-dark">
          <tr>
            <th scope="col">#</th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
          </tr>
          <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
          </tr>
          <tr>
            <th scope="row">3</th>
            <td>Larry</td>
            <td>the Bird</td>
            <td>@twitter</td>
          </tr>
        </tbody>
      </table>
    </section>

    <!--------------------------------------
PRICING
--------------------------------------->
    <section class="pt-4 pb-5" data-aos="fade-up">
      <h3 class="h5 mb-4 font-weight-bold">Pricing</h3>
      <div class="card-deck card-pricing text-center">
        <div class="card border-0 shadow-sm">
          <div class="card-header bg-info border-0 pt-4 pb-4">
            <h3 class="my-0 font-weight-normal mb-3">Personal</h3>
            <h4 class="card-title pricing-card-title">
              $11 <small class="text-muted">/ mo</small>
            </h4>
          </div>
          <div class="card-body">
            <ul class="list-unstyled mt-3 mb-4">
              <li>10 users included</li>
              <li>2 GB of storage</li>
              <li>Email support</li>
              <li>Help center access</li>
            </ul>
            <button type="button" class="btn btn-info">Sign up for free</button>
          </div>
        </div>
        <div class="card shadow-sm border-0">
          <div class="card-header bg-primary border-0 pt-4 pb-4">
            <h3 class="my-0 font-weight-normal text-white mb-3">Premium</h3>
            <h4 class="card-title pricing-card-title text-white">
              $15 <small>/ mo</small>
            </h4>
          </div>
          <div class="card-body">
            <ul class="list-unstyled mt-3 mb-4">
              <li>20 users included</li>
              <li>10 GB of storage</li>
              <li>Priority email support</li>
              <li>Help center access</li>
            </ul>
            <button type="button" class="btn btn-primary">Start Free</button>
          </div>
        </div>
        <div class="card border-0 shadow-sm">
          <div class="card-header bg-info border-0 pt-4 pb-4">
            <h3 class="my-0 font-weight-normal mb-3">Enterprise</h3>
            <h4 class="card-title pricing-card-title">
              $29 <small class="text-muted">/ mo</small>
            </h4>
          </div>
          <div class="card-body">
            <ul class="list-unstyled mt-3 mb-4">
              <li>30 users included</li>
              <li>15 GB of storage</li>
              <li>Phone and email support</li>
              <li>Help center access</li>
            </ul>
            <button type="button" class="btn btn-info">Contact us</button>
          </div>
        </div>
      </div>
    </section>

    <!--------------------------------------
PAGINATION
--------------------------------------->
    <section class="pt-4 pb-0" data-aos="fade-up">
      <h3 class="h5 mb-4 font-weight-bold">Pagination</h3>
      <nav aria-label="Page navigation example">
        <ul class="pagination">
          <li class="page-item">
            <a class="page-link" href="#"><i class="fas fa-angle-left"></i></a>
          </li>
          <li class="page-item"><a class="page-link" href="#">1</a></li>
          <li class="page-item active"><a class="page-link" href="#">2</a></li>
          <li class="page-item"><a class="page-link" href="#">3</a></li>
          <li class="page-item"><a class="page-link" href="#">4</a></li>
          <li class="page-item"><a class="page-link" href="#">5</a></li>
          <li class="page-item"><a class="page-link" href="#">6</a></li>
          <li class="page-item">
            <a class="page-link" href="#"><i class="fas fa-angle-right"></i></a>
          </li>
        </ul>
      </nav>
    </section>

    <!--------------------------------------
FORMS
--------------------------------------->
    <section class="pt-5 pb-5" data-aos="fade-up">
      <h3 class="h5 mb-4 font-weight-bold">Forms</h3>
      <h4 class="mb-4 h5">Inline Form</h4>
      <form>
        <div class="row">
          <div class="col">
            <input
              type="text"
              class="form-control input-round"
              placeholder="First name"
            />
          </div>
          <div class="col">
            <input
              type="text"
              class="form-control input-round"
              placeholder="Last name"
            />
          </div>
          <div class="col">
            <button type="submit" class="btn btn-primary btn-round">
              Subscribe
            </button>
          </div>
        </div>
      </form>
      <div class="row justify-content-between mt-5">
        <div class="col-md-4">
          <h4 class="mb-4 h5">Sign Up</h4>
          <form>
            <div class="form-group">
              <input
                type="email"
                class="form-control"
                id="exampleInputEmail1"
                aria-describedby="emailHelp"
                placeholder="Enter email"
                required=""
              />
              <small id="emailHelp" class="form-text text-muted"
                >We'll never share your email with anyone else.</small
              >
            </div>
            <div class="form-group">
              <input
                type="password"
                class="form-control"
                id="exampleInputPassword1"
                placeholder="Password"
                required=""
              />
            </div>
            <div class="form-group form-check">
              <input
                type="checkbox"
                class="form-check-input"
                id="exampleCheck1"
              />
              <label class="form-check-label" for="exampleCheck1"
                >Check me out</label
              >
            </div>
            <button type="submit" class="btn btn-success btn-round">
              Sign in
            </button>
          </form>
        </div>
        <div class="col-md-8 pl-5">
          <h4 class="mb-4 h5">Contact</h4>
          <form>
            <div class="row form-group">
              <div class="col">
                <input
                  type="text"
                  class="form-control"
                  placeholder="First name"
                />
              </div>
              <div class="col">
                <input
                  type="text"
                  class="form-control"
                  placeholder="Last name"
                />
              </div>
            </div>
            <div class="form-group">
              <textarea
                class="form-control"
                id="exampleFormControlTextarea1"
                rows="6"
              ></textarea>
            </div>
            <button type="submit" class="btn btn-primary btn-round">
              Submit
            </button>
          </form>
        </div>
      </div>
    </section>

    <!--------------------------------------
MODALS
--------------------------------------->
    <section class="pt-4 pb-5" data-aos="fade-up">
      <h3 class="h5 mb-4 font-weight-bold">Modals</h3>
      <div class="row">
        <div class="col-md-4">
          <!-- Button trigger modal type 1-->
          <button
            type="button"
            class="btn btn-primary w-100"
            data-toggle="modal"
            data-target="#exampleModalCenter"
          >
            Basic vertical center
          </button>
        </div>
        <div class="col-md-4">
          <!-- Button trigger modal type 2-->
          <button
            type="button"
            class="btn btn-info w-100"
            data-toggle="modal"
            data-target="#exampleModalLong"
          >
            Scroll long content
          </button>
        </div>
        <div class="col-md-4">
          <!-- Button trigger modal type 3 -->
          <button
            type="button"
            class="btn btn-block btn-purple w-100"
            data-toggle="modal"
            data-target="#modal_5"
          >
            Colored Modal
          </button>
        </div>
      </div>
    </section>
    <!-- Modal Type 1 -->
    <div
      class="modal fade"
      id="exampleModalCenter"
      tabindex="-1"
      role="dialog"
      aria-labelledby="exampleModalCenterTitle"
      aria-hidden="true"
    >
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
          <div class="modal-header border-0">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="pb-4 pr-4 pl-4 text-center">
              <img src="../../assets/img/favicon.ico" />
              <h2 class="heading mt-4">Basic Modal</h2>
              <p>
                Do not keep silent when your own ideas and values are being
                attacked. If a dictatorship ever comes to this country, it will
                be by the fault of those who keep silent.
              </p>
              <p>
                <em class="text-muted">You can add any HTML in the body.</em>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- Modal Type 2 -->
    <div
      class="modal fade"
      id="exampleModalLong"
      tabindex="-1"
      role="dialog"
      aria-labelledby="exampleModalLongTitle"
      aria-hidden="true"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <p>
              Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
              dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
              ac consectetur ac, vestibulum at eros.
            </p>
            <p>
              Praesent commodo cursus magna, vel scelerisque nisl consectetur
              et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
              auctor.
            </p>
            <p>
              Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
              cursus magna, vel scelerisque nisl consectetur et. Donec sed odio
              dui. Donec ullamcorper nulla non metus auctor fringilla.
            </p>
            <p>
              Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
              dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
              ac consectetur ac, vestibulum at eros.
            </p>
            <p>
              Praesent commodo cursus magna, vel scelerisque nisl consectetur
              et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor
              auctor.
            </p>
            <p>
              Aenean lacinia bibendum nulla sed consectetur. Praesent commodo
              cursus magna, vel scelerisque nisl consectetur et. Donec sed odio
              dui. Donec ullamcorper nulla non metus auctor fringilla.
            </p>
            <p>
              Cras mattis consectetur purus sit amet fermentum. Cras justo odio,
              dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta
              ac consectetur ac, vestibulum at eros.
            </p>
          </div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-dismiss="modal"
            >
              Close
            </button>
            <button type="button" class="btn btn-primary">Save changes</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Modal Type 3 -->
    <div
      class="modal fade"
      id="modal_5"
      tabindex="-1"
      role="dialog"
      aria-labelledby="modal_5"
      aria-hidden="true"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content bg-danger text-white">
          <div class="modal-header border-0">
            <h5 class="modal-title text-white">This can be any color!</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
            <div class="py-3 text-center">
              <i class="fas fa-exclamation-circle fa-4x"></i>
              <h4 class="heading mt-4">Would you like to continue?</h4>
              <p>You can add any HTML code in the body modal!</p>
            </div>
          </div>
          <div class="modal-footer border-0">
            <button
              type="button"
              class="btn btn-sm btn-dark"
              data-dismiss="modal"
            >
              No, thank you!
            </button>
          </div>
        </div>
      </div>
    </div>

    <!--------------------------------------
CARDS
--------------------------------------->
    <section class="pt-4 pb-5" data-aos="fade-up">
      <h3 class="h5 mb-4 font-weight-bold">Cards</h3>
      <div class="row">
        <div class="col-lg-6">
          <div
            class="card bg-dark overlay overlay-black text-white shadow-sm border-0"
          >
            <img
              class="card-img"
              src="../../assets/img/demo/7.jpg"
              alt="Card image"
            />
            <div class="card-img-overlay d-flex align-items-center text-center">
              <div class="card-body">
                <h3 class="card-title">Overlay center align</h3>
                <p class="card-text text-muted">
                  With supporting text below as a natural lead-in to additional
                  content.
                </p>
                <a href="#" class="btn btn-info btn-round">Do anything</a>
              </div>
            </div>
          </div>
        </div>
        <div class="col-lg-6">
          <div
            class="card bg-dark overlay overlay-blue text-white shadow-sm border-0 mt-sm-4 mt-lg-0"
          >
            <img
              class="card-img"
              src="../../assets/img/demo/9.jpg"
              alt="Card image"
            />
            <div class="card-img-overlay d-flex align-items-center text-center">
              <div class="card-body">
                <h3 class="card-title">Special title treatment</h3>
                <p class="card-text">Perhaps you need a button</p>
                <a href="#" class="btn btn-purple btn-round">Go somewhere</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="row mt-5">
        <div class="col-md-4">
          <div class="card shadow-sm border-0">
            <img
              class="card-img-top"
              src="../../assets/img/demo/blog8.jpg"
              alt="Card image cap"
            />
            <div class="card-body text-center">
              <img
                class="rounded-circle shadow mt-neg5"
                src="../../assets/img/demo/avatar.png"
                width="70"
              />
              <h5 class="card-title">Sal</h5>
              <p class="card-text text-muted">
                Hi, I am the author of Anchor Bootstrap UI Kit @wowthemesnet.
              </p>
              <div class="text-center">
                <a target="_blank" href="https://facebook.com/wowthemesnet/"
                  ><span
                    class="iconbox iconsmall rounded-circle bg-secondary text-white mr-1"
                    ><i class="fab fa-facebook-f"></i></span
                ></a>
                <a target="_blank" href="https://twitter.com/wowthemesnet"
                  ><span
                    class="iconbox iconsmall rounded-circle bg-info text-white mr-1"
                    ><i class="fab fa-twitter"></i></span
                ></a>
                <a target="_blank" href="https://github.com/wowthemesnet"
                  ><span
                    class="iconbox iconsmall rounded-circle bg-dark text-white"
                    ><i class="fab fa-github"></i></span
                ></a>
              </div>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card shadow-sm border-0">
            <div class="date">
              <div class="day">27</div>
              <div class="month">Mar</div>
            </div>
            <img
              class="card-img-top"
              src="../../assets/img/demo/3.jpg"
              alt="Card image cap"
            />
            <div class="card-body">
              <h5 class="card-title">Summer holiday is the best</h5>
              <p class="card-text text-muted">
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </p>
              <a href="#" class="btn btn-purple btn-round">View More</a>
            </div>
          </div>
        </div>
        <div class="col-md-4">
          <div class="card shadow-sm border-0">
            <img
              class="card-img-top"
              src="../../assets/img/demo/2.jpg"
              alt="Card image cap"
            />
            <div class="card-body">
              <h5 class="card-title">Just a card</h5>
              <p class="card-text text-muted">
                Some quick example text to build on the card title and make up
                the bulk of the card's content.
              </p>
              <a href="#" class="btn btn-info btn-round">Read More</a>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!--------------------------------------
JUST FOR DEMO - CTA
--------------------------------------->
    <section class="pt-5 pb-5 bg-warning rounded mt-5 mb-5" data-aos="zoom-in">
      <div class="container text-center">
        <img src="../../assets/img/favicon.ico" /><br />
        <h1 class="mb-3 mt-3">Like what you see?</h1>
        <h3 class="font-weight-light mb-5">
          Download Anchor UI Kit for <em><strong>free</strong></em> and build
          something nice upon it!
        </h3>
        <div class="row justify-content-center mb-5">
          <div class="col-lg-3">
            <a
              class="btn btn-info shadow shadow-lg btn-lg d-block mb-2 btn-round"
              href="#"
              data-toggle="modal"
              data-target="#modal_newsletter"
            >
              <i class="fas fa-cloud-download-alt mr-1"></i> Download (.zip)
            </a>
          </div>
          <div class="col-lg-3">
            <a
              target="_blank"
              class="btn btn-dark shadow-lg btn-lg d-block mb-2 btn-round"
              href="https://github.com/wowthemesnet/Anchor-Bootstrap-UI-Kit/fork"
            >
              <i class="fab fa-github mr-1"></i> Fork on Github
            </a>
          </div>
          <div class="col-lg-3">
            <a
              target="_blank"
              class="btn btn-danger shadow-lg btn-lg d-block mb-2 btn-round"
              href="https://www.wowthemes.net/donate/"
            >
              <i class="fas fa-coffee"></i> Buy me a coffee
            </a>
          </div>
        </div>
      </div>
    </section>

    <!--------------------------------------
DEMO EXAMPLES
--------------------------------------->
    <section class="pt-5 mt-4 pb-5 bg-info rounded">
      <div class="container text-center">
        <h3 class="mb-4">Examples</h3>
        <div class="d-flex">
          <div class="col">
            <a href="./login.html"
              ><img
                src="../../assets/img/demo/screenshot4.png"
                class="shadow-lg"
            /></a>
          </div>
          <div class="col">
            <a href="./blog.html"
              ><img
                src="../../assets/img/demo/screenshot2.png"
                class="shadow-lg"
            /></a>
          </div>
          <div class="col">
            <a href="./landing.html"
              ><img
                src="../../assets/img/demo/screenshot3.png"
                class="shadow-lg"
            /></a>
          </div>
        </div>
      </div>
    </section>
    <div class="row justify-content-center mb-5 pb-3">
      <div class="col-md-8">
        <div class="text-center pt-5 mt-5 mb-5">
          <h1 class="font-weight-light h3">
            <strong>Anchor UI KIT</strong>, a project by Sal @WowThemes.net. You
            can use it for personal, commercial & client projects.
            <a
              target="_blank"
              href="https://www.wowthemes.net/freebies-license/"
              >License.</a
            >
          </h1>
        </div>
        <div class="text-center">
          <a target="_blank" href="https://facebook.com/wowthemesnet/"
            ><span
              class="iconbox iconmedium rounded-circle bg-secondary text-white mr-1"
              data-toggle="tooltip"
              data-placement="top"
              title=""
              data-original-title="Follow Sal on Facebook"
              ><i class="fab fa-facebook-f"></i></span
          ></a>
          <a target="_blank" href="https://twitter.com/wowthemesnet"
            ><span
              class="iconbox iconmedium rounded-circle bg-info text-white mr-1"
              data-toggle="tooltip"
              data-placement="top"
              title=""
              data-original-title="Follow Sal on Twitter"
              ><i class="fab fa-twitter"></i></span
          ></a>
          <a target="_blank" href="https://github.com/wowthemesnet"
            ><span
              class="iconbox iconmedium rounded-circle bg-dark text-white mr-1"
              data-toggle="tooltip"
              data-placement="top"
              title=""
              data-original-title="Follow Sal on Github"
              ><i class="fab fa-github"></i></span
          ></a>
        </div>
      </div>
    </div>
    <!--------------------------------------
END
--------------------------------------->
  </main>
</template>

<script setup lang="ts">

</script>
